<template>
  <div>
    <div id="container" :class="darkMod">
      <div class="header card">
        <div class="page-width">
          <div class="logotext">
            <i class="fad fa-rocket"></i> Java
          </div>
          <a class="mytwitter fab fa-twitter" href="https://twitter.com/Osorpenke" target="_blank"></a>
        </div>
      </div>
      <div class="content">
        <div class="page card-b page-width">
          <div id="post1"></div>
          <h1>
            ls 相关指令
            <a href="#post1" class="fas fa-hashtag" />
          </h1>
          <p>普通文本</p>
          <p>
            <a href="#">红色超链接</a>
          </p>
          <h2>小标题</h2>
          <ul>
            <li>列表1</li>
            <li>列表2</li>
          </ul>
          <p>
            <i>斜体</i>
          </p>
        </div>
        <!-------------------    1start   ----------------------->
        <div class="page card-b page-width">
          <div id="post1"></div>
          <h1>
            ls 相关指令
            <a href="#post1" class="fas fa-hashtag" />
          </h1>
          <p>普通文本</p>
          <p>
            <a href="#">你啊，大抵就是那陈年清酿，那七月急雨，是那词不达意的温柔，是我的心上人，天上月。</a>
          </p>
          <h2>小标题</h2>
          <ul>
            <li>列表1</li>
            <li>列表2</li>
          </ul>
          <p>
            <i>斜体</i>
          </p>
        </div>
        <!-------------------    1end   ----------------------->
        <div class="page card-b page-width">
          <div id="post1"></div>
          <h1>
            ls 相关指令
            <a href="#post1" class="fas fa-hashtag" />
          </h1>
          <p>普通文本</p>
          <p>
            <a href="#">红色超链接</a>
          </p>
          <h2>小标题</h2>
          <ul>
            <li>列表1</li>
            <li>列表2</li>
          </ul>
          <p>
            <i>斜体</i>
          </p>
        </div>
      </div>

      <div class="darkmode card-b fas fa-moon" @click="uttonenabled = !uttonenabled"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uttonenabled: true, //dark / light 模式切换
      scroll: 0,
      darkMod: "container"
    };
  },
  methods: {},
  watch: {
    uttonenabled() {
      if (this.uttonenabled) {
        this.darkMod = "container";
      } else {
        this.darkMod = "container dark";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$sans-serif: "Source Sans Pro";
$serif: "Poly";
// @include google-font {
// 	@include google-font($sans-serif, 400);
// 	@include google-font($serif, 400, italic);
// }

body {
  font-family: $sans-serif, sans-serif;
  .clip {
    z-index: 2;
    position: fixed;
    bottom: 3rem;
    left: 3rem;
    width: 0rem;
    height: 0rem;
    border-radius: 100%;
    &.anim {
      animation: open 1.5s ease-in;
    }
    @keyframes open {
      0% {
        bottom: 3rem;
        left: 3rem;
        width: 0rem;
        height: 0rem;
        clip-path: circle(0rem at center);
      }
      100% {
        //You can't use translate(-50%, -50%) to keep it aligned because it affects the container inside, so you need to animate the position
        bottom: calc(-250vmax + 3rem);
        left: calc(-250vmax + 3rem);
        width: 500vmax;
        height: 500vmax;
        clip-path: circle(100% at center);
      }
    }
  }
  .container {
    &:not(.dark) {
      --background: #fcfbfe;
      --color: #323133;
      --cardbackground: #ffffff;
      --cardborder: #e9e9e9;
      --cardtext: #323133;
      --cardtext2: #3c3b3d;
      --cardshadow: rgba(0, 0, 0, 0.1);
      --accent: #bf263c;
    }
    &.dark {
      --background: #1c1b20;
      --color: #f5f7fa;
      --cardbackground: #222126;
      --cardborder: #252429;
      --cardtext: #f5f7fa;
      --cardtext2: #e6e9ed;
      --cardshadow: rgba(0, 0, 0, 0.1);
      --accent: #d8334a;
    }
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    position: fixed; //Container becomes the effective body of the document, and multiple containers stack on top of each other just requiring the top to be clipped into a shape and expanded to cover the bottom, then copy the top to the bottom and delete the top.
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: var(--background);
    color: var(--color);
    *[class*="card"] {
      background: var(--cardbackground);
      color: var(--cardtext);
      box-shadow: 0 0 1rem -0.25rem var(--cardshadow);
      &.card-b {
        border: 1px solid var(--cardborder);
      }
    }
    .darkmode {
      position: fixed;
      bottom: 1rem;
      left: 1rem;
      font-size: 1.75rem;
      padding: 1rem;
      margin: 1px;
      border-radius: 100%;
      border-color: var(--accent) !important;
      box-shadow: 0 0 1rem -0.25rem var(--accent),
        inset 0 0 1rem -0.75rem var(--accent);
      color: var(--accent);
      cursor: pointer;
      transition: 0.25s -0.05s;
      &:hover {
        box-shadow: 0 0 1rem -0.25rem var(--accent),
          inset 0 0 1rem -0.25rem var(--accent);
        //background:var(--background);
      }
    }
    .page-width {
      max-width: 800px;
      width: calc(100vw - 8rem);
        // background-image: url('https://pic4.zhimg.com/v2-d75cbcaa6940b72cb8642fbf0590d218_r.jpg')
    }
    .header {
      z-index: 1;
      align-self: stretch;
      display: flex;
      flex-direction: row;
      justify-content: center;
      position: sticky;
      top: 0;
      border-bottom: 1px solid var(--cardborder);
      height: 4rem;
      line-height: 4rem;
      font-size: 1.75rem;
      .page-width {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
      .logotext {
        i {
          position: relative;
          top: 0.15rem;
        }
      }
      .mytwitter {
        position: relative;
        line-height: 4rem;
        color: var(--accent);
        text-decoration: none;
        animation: flash 4s ease;
        @keyframes flash {
          0%,
          50%,
          100% {
            color: var(--accent);
          }
          70%,
          80% {
            color: var(--cardtext);
          }
        }
      }
    }
    .page {
      position: relative;
      margin: 2rem 0;
      padding: 2rem;
      &:not(:last-child) {
        margin-bottom: 0rem;
      }
      &:target-within {
        //I want CSS4 today
        border-color: var(--accent) !important;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        margin: 0;
        &:last-child {
          margin-bottom: 0;
        }
      }
      h1 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--cardborder);
        a {
          text-decoration: none;
          font-weight: 200;
          &:hover {
            font-weight: 400;
          }
        }
      }
      p:last-child {
        margin-bottom: 0;
      }
      a {
        color: var(--accent);
        &:not(:hover) {
          text-decoration: none;
        }
      }
      i {
        color: var(--cardtext2);
        font-family: $serif, sans-serif;
      }
      ul {
        list-style: none;
        padding-left: 1rem;
        li:before {
          content: "•";
          margin-right: 1rem;
          color: var(--accent);
        }
      }
      > div[id] {
        position: absolute;
        top: calc(-6rem - 2px);
      }
    }
  }
}
</style>